<template>
    <div class="container">
        <div class="btns">
            <el-button @click="back">返回</el-button>
            <el-button type="primary" v-if="!isReply" @click="finish">提交</el-button>
        </div>
        <div class="edit_content">
            <div v-if="isReply" style="display:flex;flex-direction: column;padding-left:10px">
                <span class="title">回复内容：</span>
                <span class="subTitle">{{ replyContent }}</span>
                <span class="title">回复账号：</span>
                <span class="subTitle">{{ uhomeUserNickName }}</span>
                <span class="title">回复时间：</span>
                <span class="subTitle">{{ replyTime | dateFilter }}</span>
            </div>
            <div v-else>
                <el-input type="textarea" :rows="5" placeholder="请输入回复内容" v-model="replytext"> </el-input>
            </div>
            <div class="line"></div>
            <span class="title">联系方式：</span>
            <span class="subTitle">{{ concatInfo }}</span>
            <span class="title">问题描述：</span>
            <span class="subTitle">{{ content }}</span>
            <img
                style="max-width:300px;margin-top: 10px;"
                v-for="(item, index) in imgList"
                :key="index"
                :src="'https://uhome.haier.net/acecology/hsadmin/static/' + item.path"
            />
        </div>
    </div>
</template>

<script>
export default {
    props: {
        isReply: Boolean,
        id: Number
    },
    data() {
        return {
            replytext: '',
            title: '',
            content: '',
            concatInfo: '',
            imgList: [],
            replyContent: '',
            replyTime: '',
            uhomeUserNickName: ''
        };
    },
    created() {
        if (!this.isAdd) {
            this.getData();
        }
    },
    methods: {
        finish() {
            if (!this.replytext || this.replytext.length == 0) {
                this.$message.error('请输入回复内容');
                return;
            }
            this.$api
                .post({
                    url: '/feedback/reply',
                    data: {
                        replyContent: this.replytext,
                        id: this.id
                    }
                })
                .then(res => {
                    this.$emit('save');
                })
                .catch(err => {});
        },
        getData() {
            let self = this;
            self.$api
                .get({
                    url: '/feedback/getDetail',
                    data: {
                        id: self.id
                    }
                })
                .then(res => {
                    self.title = res.data.title || '';
                    self.content = res.data.content || '';
                    self.concatInfo = res.data.concatInfo || '';
                    self.imgList = res.data.files || [];
                    self.replyContent = res.data.replyContent || '';
                    self.replyTime = res.data.replyTime || '';
                    self.uhomeUserNickName = res.data.uhomeUserNickName || '';
                    console.log('🚀 ~ file: editBanner.vue ~ line 156 ~ getData ~ res', res);
                })
                .catch(err => {});
        },
        back() {
            this.$emit('back');
        },
        handleClick() {}
    }
};
</script>

<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    .btns {
        display: flex;
        justify-content: space-between;
    }
    .edit_content {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        width: 100%;
        .line {
            margin-top: 20px;
            width: 100%;
            height: 1px;
            background-color: #ddd;
        }
        .title {
            margin-top: 10px;
            font-weight: 600;
            font-size: 16px;
        }
        .subTitle {
            margin-top: 5px;
            font-size: 13px;
            color: #666;
        }
    }
}
</style>
